<style>
    .slideshow-box {
        position: relative;
        overflow: hidden;
    }
    .slideshow-box .slideshow-box_text{
        position: absolute;
        padding: 0 26px;
        z-index: 2;
        top: 120px;
        text-align: center;
        width: 100%;
        color: #ffff;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
    }
    .slideshow-box_text .text_1 {
        font-weight: 700;
        font-size: 36px;
        line-height: 48px;
        margin-top: 8px;
   }
   .tenways-box-slideshow .richtext {
        position: absolute;
        width: 100%;
        bottom: 10px;
        color: #fff;
        height: 48px;
  }
  .tenways-box-slideshow p{
    font-size: 16px;
    line-height: 24px;
    margin: 0 auto;
  }
  .slideshow-box .slideshow__media{
    min-height: 100vh;
  }
  .thumbsslider-column{
    position: absolute;
    z-index: 2;
    width: 575px;
    bottom: 80px;
    color: #fff;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 1px solid #4D4D4D; 
    border-radius: 1px;
  }
  .thumbsslider-column .swiper-slide-thumb-active{
    border-bottom: 1px solid #fff;
    padding-bottom: 8px;
    border-radius: 1px;
    -webkit-transition: width .3s cubic-bezier(.25, .45, .46, .92);
    transition: width .3s cubic-bezier(.25, .45, .46, .92);
  } 
  .slideshow-box .swiper-scrollbar{
    bottom: 80px;
    background: #4D4D4D;
    left: 50%;
    transform: translateX(-50%);
    max-width: 575px;
  }
  .slideshow-box .swiper-scrollbar-drag{
    background: #fff;
  }
  .thumbsslider-column .swiper-slide{
    width: auto !important;
    cursor: pointer;
  }
  .thumbsslider-column .swiper-wrapper{
    flex-wrap: wrap;
    justify-content: space-between;
  }

   @media screen and (min-width: 991px){
    .slideshow-box .text-hiddle{
        display: none;
     }
     .slideshow-box .swiper-scrollbar-drag {
        width: 150px !important;
    }
    .slideshow-box .swiper-scrollbar{
      display: none;
    }
  }
    @media screen and (max-width: 1280px){
    .tenways-box-slideshow p{
      font-size: 14px;
   }
  }
   @media screen and (max-width: 990px){
    .slideshow-box .swiper-horizontal > .swiper-scrollbar{
      height: 1px;
    }
    .slideshow-box .slideshow-box_text {
        position: relative;
        color: #000;
        top: 0;
        padding: 0 26px;
        z-index: 2;
        font-size: 14px;
        line-height: 22px;
    }
    .slideshow-box_text .text_1 {
        font-size: 24px;
        line-height: 32px;
        margin-top: 4px;
        margin-bottom: 20px;
    }
    .thumbsslider-column {
      width: 100%;
      display: none;
     }
     .tenways-box-slideshow .richtext {
        position: relative;
        margin-top: 24px;
        width: 100%;
        bottom: auto;
        color: #000;
        text-align: left;
        height: auto;
      }
      .slideshow-box .swiper-scrollbar{
        max-width: 150px;
        position: relative;
        left: auto;
        transform: none;
        background: rgba(0, 0, 0, 0.1);
        bottom: 0;
        margin-top: 32px;
      }
      .slideshow-box .swiper-scrollbar-drag {
         background: #000;
         width: 50px !important;
         height: 2px;
         top: -1px;
      }
      .text-hiddle {
        font-weight: 700;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 12px;
     }
     .tenways-box-slideshow p {
        font-size: 14px;
        line-height: 22px;
        margin: 0 auto;
    }
    .tenways-box-slideshow .richtext .page-width{
      padding: 0;
    }
    .tenways-box-slideshow .pc_banner{
      display: none;
    }
    .tenways-box-slideshow .image_mobile{
      display: block;
      min-height: auto;
    }
    .tenways-box-slideshow .swiper-slide{
      opacity: .5;
      -webkit-transition: all .3s ease-in-out;
      -khtml-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
    }
    .tenways-box-slideshow .swiper-slide-active{
      opacity: 1;
    }
    .tenways-box-slideshow{
      padding: 0 26px;
    }
   }
   /* adapt for iPhone11 */
   @media screen and (width: 414px) {
      .slideshow-box_text .text_1 {
        font-size: 26px;
      }
   }
   /* adapt for iPhone14 pro max */
   @media screen and (width: 430px) {
      .slideshow-box_text .text_1 {
        font-size: 27px;
      }
   }
</style>


<div class="box-slide {% if section.settings.middle_width %} slideshow-box_width {% endif %}">
<div class="slideshow-box">
    {% if section.settings.text != blank %}
      <div class="slideshow-box_text text center">
        {{ section.settings.text }}
        {% if section.settings.text_1 != blank %}
          <div class="text_1">{{ section.settings.text_1 }}</div>
        {% endif %}
      </div>
    {% endif %}
    <div class="swiper-father">
      <div class="swiper tenways-box-slideshow">
        <div class="swiper-wrapper">
          {%- for block in section.blocks -%}
            {%- case block.type -%}
              {%- when 'image' -%}
                <div class="swiper-slide" {{ block.shopify_attributes }} data-swiper-parallax="-600">
                  <div class="pc_banner slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}"
                {% if section.settings.middle_width %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 | floor }}%;" {% endif %}
                  >
                    {%- if block.settings.image -%}
                      <img
                        srcset="
                          {%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
                          {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
                          {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
                          {%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
                          {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
                          {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
                          {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
                          {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
                          {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
                          {{ block.settings.image | image_url }} {{ block.settings.image.width }}w
                        "
                        sizes="100vw"
                        src="{{ block.settings.image | img_url: '1500x' }}"
                        data-src="{{ block.settings.image | img_url: '1500x' }}"
                        loading="lazy"
                        class="lazyload"
                        alt="{{ block.settings.image.alt | escape }}"
                        width="{{ block.settings.image.width }}"
                        height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
                      >
                    {%- else -%}
                      {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
                    {%- endif -%}
                  </div>
                  <div
                    class="image_mobile slideshow__media banner__media media{% if block.settings.image_mobile == blank %} placeholder{% endif %}"
                    {% if block.settings.image_mobile != blank %}
                      style="padding-bottom: {{ 1 | divided_by: block.settings.image_mobile.aspect_ratio | times: 100 | floor }}%;"
                    {% endif %}
                  >
                    {%- if block.settings.image_mobile != blank -%}
                      <img
                        srcset="
                          {%- if block.settings.image_mobile.width >= 375 -%}{{ block.settings.image_mobile | image_url: width: 375 }} 375w,{%- endif -%}
                          {%- if block.settings.image_mobile.width >= 550 -%}{{ block.settings.image_mobile | image_url: width: 550 }} 550w,{%- endif -%}
                          {%- if block.settings.image_mobile.width >= 750 -%}{{ block.settings.image_mobile | image_url: width: 750 }} 750w,{%- endif -%}
                          {%- if block.settings.image_mobile.width >= 1100 -%}{{ block.settings.image_mobile | image_url: width: 1100 }} 1100w,{%- endif -%}
                          {%- if block.settings.image_mobile.width >= 1500 -%}{{ block.settings.image_mobile | image_url: width: 1500 }} 1500w,{%- endif -%}
                          {%- if block.settings.image_mobile.width >= 1780 -%}{{ block.settings.image_mobile | image_url: width: 1780 }} 1780w,{%- endif -%}
                          {%- if block.settings.image_mobile.width >= 2000 -%}{{ block.settings.image_mobile | image_url: width: 2000 }} 2000w,{%- endif -%}
                          {%- if block.settings.image_mobile.width >= 3000 -%}{{ block.settings.image_mobile | image_url: width: 3000 }} 3000w,{%- endif -%}
                          {%- if block.settings.image_mobile.width >= 3840 -%}{{ block.settings.image_mobile | image_url: width: 3840 }} 3840w,{%- endif -%}
                          {{ block.settings.image_mobile | image_url }} {{ block.settings.image_mobile.width }}w
                        "
                        sizes="100vw"
                        src="{{ block.settings.image_mobile | img_url: '990x' }}"
                        data-src="{{ block.settings.image_mobile | img_url: '990x' }}"
                        loading="lazy"
                        class="lazyload"
                        alt="{{ block.settings.image_mobile.alt | escape }}"
                        width="{{ block.settings.image_mobile.width }}"
                        height="{{ block.settings.image_mobile.width | divided_by: block.settings.image_mobile.aspect_ratio | round }}"
                      >
                    {%- else -%}
                      {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
                    {%- endif -%}
                  </div>
                  {% if block.settings.richtext != blank %}
                    <div class="richtext center">
                      <div class="page-width">
                        {% if block.settings.text != blank %}
                          <div class="text-hiddle">{{ block.settings.text }}</div>
                        {% endif %}
                        {{ block.settings.richtext }}
                      </div>
                    </div>
                  {% endif %}
                </div>
            {%- endcase -%}
          {%- endfor -%}
        </div>
        <div class="swiper-scrollbar swiper-box"></div>
      </div>
      <div thumbsSlider class="swiper thumbsslider-column">
        <div class="swiper-wrapper">
          {%- for block in section.blocks -%}
            {%- case block.type -%}
              {%- when 'column' -%}
                <div class="swiper-slide" {{ block.shopify_attributes }} data-swiper-parallax="-600">
                  {% if block.settings.text != blank %}
                    <div class="text">
                      {{ block.settings.text }}
                    </div>
                  {% endif %}
                </div>
            {%- endcase -%}
          {%- endfor -%}
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const isAutoPlay = {{ section.settings.auto_play }} || false;
  var thumbsSwiper = new Swiper('.thumbsslider-column',{
    speed: 1200,
    slidesPerView: 3,
    watchSlidesVisibility: true
  });

  function assignAutoParam (auto) {
    if (!auto) {
      return {}
    } else {
      return {
        loop: true,
        autoplay: {
          duration: 5000,
          reverseDirection: false,
          disableOnInteraction: false
        }
      }
    }
  }



  var gallerySwiper = new Swiper('.tenways-box-slideshow', {
    speed: 1200,
    slidesPerView: 1.1,
    spaceBetween: 16,
    observer:true,
    observeParents:true,
    ...assignAutoParam(isAutoPlay),
    scrollbar: {
      el: '.swiper-scrollbar.swiper-box',
      dragSize: 50,
    },
    thumbs: {
        swiper: thumbsSwiper,
    },
    breakpoints: {
      990: {
        slidesPerView: 1.1,
        spaceBetween: 16,
      },
      991: {
        slidesPerView: 1,
        spaceBetween: 0,
        centeredSlides : true,
        effect: 'fade',
        fadeEffect: {
          crossFade: true
        },
      }
    }
  });
</script>

<script>
  var ribbon = $('sticky-header');
  var ribbonHeight = ribbon.height();
  window.ribbonHeight = ribbon.height();
  if (ribbonHeight > 54) {
    $(".box-slide").addClass('has-ribbon');
  }
</script>


{% unless section.settings.middle_width %}
    <script>
      $(window).ready(function() {
        var tooSmall = false;
        var controller = null;
        var maxWidth = 991;

        if( $(window).width() < maxWidth ) {
          tooSmall = true;
        }

        function initScrollMagic() {
          const tenwaysBlockDes = document.querySelector(".slideshow-box");
          const tenwaysAgot = tenwaysBlockDes.querySelector(".slideshow-box_text");
          const AgoxController = new ScrollMagic.Controller();
          const tl = new TimelineMax();

          tl.fromTo(
            '.slideshow-box .slideshow-box_text',
            1,
            {
              autoAlpha: 0,
              opacity: 0
            },
            {
              autoAlpha: 1,
              opacity: 1,
              yPercent: '-40%',
              ease: Linear.easing
            },
          )



          let scene6 = new ScrollMagic.Scene({
            duration: '350',
            triggerElement: tenwaysBlockDes,
            triggerHook: 0
          })
          .setTween(tl)
          .setPin(tenwaysBlockDes)
          .addTo(AgoxController);
        }

        if( !tooSmall ) {
          initScrollMagic();
        }

        $(window).resize( function() {
          var wWidth = $(window).width();
          if( wWidth < maxWidth ) {
            if( AgoxController !== null && AgoxController !== undefined ) {
              AgoxController = AgoxController.destroy( true );
            }
          } else if( wWidth >= maxWidth ) {
            if( AgoxController === null || AgoxController === undefined ) {
              initScrollMagic();
            }
          }
        });
      })
    </script>
{% endunless %}



{% schema %}
{
  "name": "Slideshow box",
  "class": "slideshow-box slideshow-box_middle spaced-section spaced-section--full-width",
  "tag": "section",
  "settings": [
    {
        "type": "checkbox",
        "id": "middle_width",
        "label": "Middle width",
        "default": false
    },
    {
    "type": "text",
    "id": "text",
    "label": "Text"
   },
   {
    "type": "text",
    "id": "text_1",
    "label": "Text 1"
   },
   {
    "type": "checkbox",
    "id": "auto_play",
    "label": "auto play",
    "default": false
   }
 ],
  "blocks": [
    {
      "type": "image",
      "name": "image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "image_picker",
          "id": "image_mobile",
          "label": "Image mobile"
        },
        {
         "type": "text",
         "id": "text",
         "label": "text"
       },
        {
         "type": "richtext",
         "id": "richtext",
         "label": "Richtext"
       }
      ]
    },
    {
      "type": "column",
      "name": "column",
      "settings": [
        {
         "type": "text",
         "id": "text",
         "label": "text"
       }
      ]
    }
  ],
  "presets": [
    {
      "name": "Slideshow box",
      "blocks": [
        {
          "type": "image"
        }, {
          "type": "image"
        }, {
          "type": "image"
        }
      ]
    }
  ]
}
{% endschema %}